<script setup>
import { ref, reactive, toRefs, computed } from 'vue'
import api from '@/api'
import { ElMessage } from 'element-plus'
import List from '@/components/List/index.vue'

const router = useRouter()

const ruleFormRef = ref()

const filename = ref('')

const data = reactive({
    table: false,
    drawer: false,
    dialog: false,
    loading: false,
    active: 0,
    formLabelWidth: '80px',
    timer: null,
    state: 0,

    deviceNamesList: [],
    supplierList: [],
    modelList: [],
    checkerList: [],
    paramList: [],

    paramForm: {

    },

    id: '',

    registerNewDeviceForm: {
        number: 1,
        code: '',
        checkerId: '',
        checker: '',
        warehouse: '机电科库房',
        createTime: '',
        lifeSpan: 5,
        feeModel: '专项资金',
        mType: '固定资产',
        mName: '',
        name: '',
        sId: '',
        mId: '',
        supplierV: '',
        modelV: '',
        newOld: '全新',
        unit: '',
        serialNumber: '',
        radio: '',
        safetySymbol: '',
        explosionProofLicense: '',
        productionLicense: '',
        fileNo: '',
        productionDate: '',
        money: '',
        taxRate: '',
        monthDepreciation: '',
        weight: '',
        voltage: '',
        current: '',
        remark: '',
        attachments: []
    }
})


const checkNumber = (rule, value, callback) => {
  if (!value && value !== 0) {
    return callback(new Error('Please input the age'))
  }
  setTimeout(() => {
    if (!Number.isInteger(value)) {
      callback(new Error('请输入数字！'))
    } else {
      if (value < 1) {
        callback(new Error('数量必须大于0！'))
      } else {
        callback()
      }
    }
  }, 1000)
}

const checkSupplier = (rule, value, callback) => {
    setTimeout(() => {
        if(!value) {
            return callback(new Error('请输入供应商！'))
        }
    }, 1)
}

// 表单校验规则

const rules = reactive({
    code: [{ required: true, message: '请输入设备编号', trigger: 'blur' },],
    number: [{ required: true, message: '请输入数量' },
        { type: 'number', message: '数量必须为数字类型！' },
        { validator: checkNumber, trigger: 'blur' }],
    createTime: [{ required: true, message: '请输入入库日期', trigger: 'blur' },],
    checkerId: [{ required: true, message: '请输入验收人ID', trigger: 'blur' },],
    lifeSpan: [{ required: true, message: '请输入使用年限！' },
        { type: 'number', message: '数量必须为数字类型！' },
        { validator: checkNumber, trigger: 'blur' }],
    mId: [{ required: true, message: '请输入设备型号', trigger: 'blur' },],
    sId: [{ required: true, message: '请输入供应商'},
          { validator: checkNumber, trigger: 'blur' }],
    name: [{ required: true, message: '请输入设备名称' },],
    newOld: [{ required: true, message: '请输入新旧程度', trigger: 'blur' },],
    serialNumber: [{ required: true, message: '请输入出厂编号', trigger: 'blur' },],
    productionDate: [{ required: true, message: '请输入生产日期', trigger: 'blur' },],
})



// 翻页

const next = () => {
    if (active.value < 3) { active.value = active.value + 1 }
}
const before = () => {
    if (active.value > 0) { active.value = active.value - 1 }
}

const submitAdd = async () => {

        await ruleFormRef.value.validate((valid, fields) => {
            if (valid) {
                return new Promise(resolve => {
                    api.post('api/equipment/equipmentAdd', {
                        code: data.registerNewDeviceForm.code,
                        nId: data.registerNewDeviceForm.nId,
                        mId: data.registerNewDeviceForm.mId,
                        sId: data.registerNewDeviceForm.sId,
                        number: data.registerNewDeviceForm.number,
                        name: data.registerNewDeviceForm.name,
                        productionLicense: data.registerNewDeviceForm.productionLicense,
                        explosionProofLicense: data.registerNewDeviceForm.explosionProofLicense,
                        fileNo: data.registerNewDeviceForm.fileNo,
                        productionDate: data.registerNewDeviceForm.productionDate,
                        money: data.registerNewDeviceForm.money,
                        taxRate: data.registerNewDeviceForm.taxRate,
                        monthDepreciation: data.registerNewDeviceForm.monthDepreciation,
                        checkerId: data.registerNewDeviceForm.checkerId,
                        section: data.registerNewDeviceForm.warehouse,
                        newOld: data.registerNewDeviceForm.newOld,
                        remark: data.registerNewDeviceForm.remark,
                        params: Object.keys(paramForm).map(k => ({'pId': k, 'message': paramForm[k]})),
                        attachments: data.registerNewDeviceForm.attachments,
                    }).then(res => {
                        if (res.c === 2) {
                            ElMessage({
                                message: '添加成功',
                                type: ''
                            })
                            window.location.reload()
                        } else {
                            ElMessage({
                                message: res.m,
                                type: 'error'
                            })
                        }

                    })
                })
            } else {
                ElMessage({
                    type: 'error',
                    message: Object.values(fields).map(i => i[0].message).join()
                })
            }
        })

}

const submitEdit = async () => {

    await ruleFormRef2.value.validate((valid, fields) => {
        if (valid) {
            return new Promise(resolve => {
                api.post('api/equipment/equipmentUpdate', {
                    id: data.id,
                    code: data.registerNewDeviceForm.code,
                    mId: data.registerNewDeviceForm.mId,
                    sId: data.registerNewDeviceForm.sId,
                    number: data.registerNewDeviceForm.number,
                    productionLicense: data.registerNewDeviceForm.productionLicense,
                    explosionProofLicense: data.registerNewDeviceForm.explosionProofLicense,
                    fileNo: data.registerNewDeviceForm.fileNo,
                    productionDate: data.registerNewDeviceForm.productionDate,
                    money: data.registerNewDeviceForm.money,
                    taxRate: data.registerNewDeviceForm.taxRate,
                    monthDepreciation: data.registerNewDeviceForm.monthDepreciation,
                    checkerId: data.registerNewDeviceForm.checkerId,
                    section: data.registerNewDeviceForm.warehouse,
                    newOld: data.registerNewDeviceForm.newOld,
                    remark: data.registerNewDeviceForm.remark,
                    params: Object.keys(paramForm).map(k => ({'pId': k, 'message': paramForm[k]})),
                    attachments: data.registerNewDeviceForm.attachments,
                }).then(res => {
                    if (res.c === 2) {
                        ElMessage({
                            message: '修改成功',
                            type: ''
                        })
                        window.location.reload()
                    } else {
                        ElMessage({
                            message: res.m,
                            type: 'error'
                        })
                    }

                })
            })
        } else {
            ElMessage({
                type: 'error',
                message: Object.values(fields).map(i => i[0].message).join()
            })
        }
    })

}

const submitDel = () => {
    api.post('api/equipment/equipmentDel', {
        id: data.id

    }).then(res => {
        if (res.c === 0) {
            ElMessage({
                message: '删除成功',
                type: 'success'
            })
            window.location.reload()
        } else {
            ElMessage({
                message: res.m,
                type: 'error'
            })
        }

    })
}

// 供应商、型号、参数逻辑

const modelDisabled = computed(() => (!data.modelList || !data.modelList.length))

api.post('api/comp/emNamelList', {'pym': ''})
.then(res => {
    data.deviceNamesList = res.d
})

api.post('api/comp/supplierList', {'pym': '', 'page': '1', 'pageSize': Number.MAX_SAFE_INTEGER})
.then(res => {
    data.supplierList = res.d.records
})

api.post('api/comp/modelList', {})
.then(res => {
    data.modelList = res.d
})

api.post('api/comp/userList', {'type': '3', 'pym': ''})
.then(res => {
    data.checkerList = res.d
})


const supplierQuerySearch = (queryString, cb) => {cb(data.supplierList.filter(d => (d.name.match(new RegExp(queryString, 'gi')))).map(d => {
    let ret = {}
    ret = d
    ret.value = d.name
    return ret
}).slice(0, 5))}

const supplierHandleSelect = item => {
    data.registerNewDeviceForm.supplierV = item.name
    data.registerNewDeviceForm.sId = item.id
    api.post('api/comp/supplierModelList', {'sId': data.registerNewDeviceForm.sId})
    .then(res => {
        data.modelList = res.d
    })
}

const modelQuerySearch = (queryString, cb) => {cb(data.modelList.filter(d => (d.name.match(new RegExp(queryString, 'gi')))).map(d => {
    let ret = {}
    ret = d
    ret.value = d.name
    return ret
}).slice(0, 5))}

const modelHandleSelect = item => {
    data.registerNewDeviceForm.modelV = item.name || item.mName
    data.registerNewDeviceForm.mId = item.id || item.mId


    api.post('api/comp/modelDetail', {'id': data.registerNewDeviceForm.mId})
    .then(res => {

        res.d.name = data.registerNewDeviceForm.name

        data.registerNewDeviceForm = {
            ...data.registerNewDeviceForm,
            ...res.d
        }

        res.d.modelParamList.forEach(d => {
            data.paramForm[d.pId] = d.pMessage
        })

        api.post('api/comp/supplierModelList', {'mId': item.id})
        .then(res => {
            data.registerNewDeviceForm = {
                ...data.registerNewDeviceForm,
                ...res.d[0]
            }
            data.registerNewDeviceForm.supplierV = res.d[0].sName
        })
    })
}

const nameQuerySearch = (queryString, cb) => {cb(data.deviceNamesList.filter(d => (d.name.match(new RegExp(queryString, 'gi')))).map(d => {
    let ret = {}
    ret = d
    ret.value = d.name
    return ret
}).slice(0, 5))}

const nameHandleSelect = (item) => {
    data.registerNewDeviceForm.name = item.name
    api.post('api/comp/nameParamList', {'nId': item.id})
    .then(res => {
        data.paramList = res.d
        data.paramList.forEach(d => {
            data.paramForm[d.id] = ''
        })
        console.log(item)
    })

}

const checkerQuerySearch = (queryString, cb) => {cb(data.checkerList.filter(d => (d.name.match(new RegExp(queryString, 'gi')))).map(d => {
    let ret = {}
    ret = d
    ret.value = d.name
    return ret
}).slice(0, 5))}

const checkerHandleSelect = (item) => {
    data.registerNewDeviceForm.checker = item.name
    data.registerNewDeviceForm.checkerId = item.id
}

// 点击填充数据逻辑

const disabledEmit = computed(() => (data.state === 1))

const changeState = state => {
    data.state = state

    for(let i in data.registerNewDeviceForm) {
        data.registerNewDeviceForm[i] = ''
    }
    for(let i in data.registerNewDeviceForm) {
        data.registerNewDeviceForm[i] = ''
    }
    data.paramForm = {}
    data.paramList = []
    for(let i in data.registerNewDeviceForm) {
        data.registerNewDeviceForm[i] = ''
    }
    data.registerNewDeviceForm.number = 1
}

const handleClick = incomingValue => {

    if(!incomingValue) {
        return
    }



    data.id = incomingValue.id

    for(let i in incomingValue) {
        if(i in data.registerNewDeviceForm) {
            data.registerNewDeviceForm[i] = incomingValue[i]
        }
        if(i in data.registerNewDeviceForm) {
            data.registerNewDeviceForm[i] = incomingValue[i]
        }
        if(i in data.paramForm) {
            data.paramForm[i] = incomingValue[i]
        }
        if(i in data.registerNewDeviceForm) {
            data.registerNewDeviceForm[i] = incomingValue[i]
        }
    }
    nameHandleSelect({'id': incomingValue.nId, 'name': incomingValue.name})
    supplierHandleSelect({'id': incomingValue.sId, 'name': incomingValue.supplier})
    modelHandleSelect({'mId': incomingValue.mId, 'mName': incomingValue.name})


}

// 文件上传

const upload = name => (i) => {

    let formData = new FormData()
    let file = i.file
    filename.value = file.name
    formData.append('name', file.name)
    formData.append('files', file)
    console.log(formData.get('file'))
    api.post("api/file/uploads",formData,{}).
    then((res) => {
        data.registerNewDeviceForm.attachments.push({
            'name': name,
            'path': res.d[0].path
        })
    })
}

const dialogImageUrl = ref('')
const dialogVisible = ref(false)

const handleRemove = (file, fileList) => {
  console.log(file, fileList)
}
const handlePictureCardPreview = (file) => {
  dialogImageUrl.value = file.url
  dialogVisible.value = true
}

const onDblClick = rtr => {
    router.push(rtr)
}



const {
    table,
    drawer,
    dialog,
    loading,
    active,
    formLabelWidth,
    timer,
    deviceNamesList,
    supplierList,
    modelList,
    paramList,
    paramForm,
    id,

    registerNewDeviceForm,

} = toRefs(data)
</script>

<template>
    <div>
        <page-main>
            <List @handleClick="handleClick" @changeState="changeState"/>

            <!-- <el-button type="primary" style="margin-top: 20px;" @click="dialog = true">新设备入库登记</el-button> -->

            <!-- <el-drawer
                ref="drawer"
                v-model="dialog"
                title="新设备入库"
                direction="rtl"
                custom-class="demo-drawer"
                size="80%"
            > -->
            <el-card>
                <div class="drawer__content">
                    <!-- <el-steps :active="active" align-center>
                        <el-step title="步骤1" />
                        <el-step title="步骤2" />
                        <el-step title="步骤3" />
                        <el-step title="步骤4" />
                    </el-steps> -->
                    <!--新设备登记第一步表单1-->
                        <el-form :inline="true" ref="ruleFormRef" label-position="left" label-width="100px" :rules="rules" :model="registerNewDeviceForm">
                            <!--第一行-->
                            <el-row :gutter="48">
                                <el-col :span="12">
                                    <el-form-item label="设备编号：" prop="code">
                                        <el-input  v-model="registerNewDeviceForm.code"  placeholder="输入编号" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="验收人：" prop="checker" @dblclick.native="onDblClick('/system/staff/staffManage/delivery')">
                                        <el-autocomplete v-model="registerNewDeviceForm.checker" :fetch-suggestions="checkerQuerySearch" @select="checkerHandleSelect" placeholder="输入验收人" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="管理库房：">
                                        <el-select v-model="registerNewDeviceForm.warehouse"  placeholder="选择库房">
                                            <el-option label="机电科库房" value="机电科库房" />

                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="设备数量：" prop="number">
                                        <el-input  v-model.number="registerNewDeviceForm.number"  placeholder="输入数量" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第二行-->
                            <el-row :gutter="48">
                                <el-col :span="12">
                                    <el-form-item label="入库日期：" prop="createTime">
                                        <el-date-picker  type="date" v-model="registerNewDeviceForm.createTime"  placeholder="输入时间" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="使用年限：" prop="lifeSpan">
                                        <el-input  v-model.number="registerNewDeviceForm.lifeSpan"  placeholder="输入使用年限！" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="设备类型：" prop="mType">
                                        <el-select v-model="registerNewDeviceForm.mType"  placeholder="选择类型">
                                            <el-option label="固定资产" value="固定资产" />
                                            <el-option label="配件" value="配件" />
                                            <el-option label="随即配套" value="随即配套" />

                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="费用类型：">
                                        <el-select v-model="registerNewDeviceForm.feeModel"  placeholder="选择类型">
                                            <el-option label="专项资金" value="专项资金" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第三行-->


                    <!-- <div style="position: absolute;bottom: 60px;right: calc(50% - 250px)">
                        <el-row :gutter="24">
                            <el-col :span="12">
                                <el-button type="primary" disabled @click="before">上一步</el-button>
                            </el-col>
                            <el-col :span="12">
                                <el-button type="primary" @click="next">下一步</el-button>
                            </el-col>
                        </el-row>
                    </div> -->
                    <el-divider />
                    <!--新设备登记第二步表单2-->
                        <!--第一行:AI铭牌行-->
                        <el-row :gutter="24">
                            <el-col :span="24">
                                <!-- <el-button disabled style="font-size: 20px;margin-bottom: 30px;margin-left: 80px; float: left">AI扫铭牌</el-button> -->
                            </el-col>
                        </el-row>
                            <!--第二行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="设备名称：" prop="name">
                                        <el-autocomplete v-model="registerNewDeviceForm.name" :fetch-suggestions="nameQuerySearch"  placeholder="输入名称" @select="nameHandleSelect" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="供应商：" prop="supplierV">
                                        <el-autocomplete ref="supplierRef" v-model="registerNewDeviceForm.supplierV" :fetch-suggestions="supplierQuerySearch" @select="supplierHandleSelect"  placeholder="输入供应商" />
                                    </el-form-item>
                                </el-col>


                            </el-row>
                            <!--第二行-->
                            <el-row :gutter="24">

                                <el-col :span="12">
                                    <el-form-item label="设备型号：" prop="modelV">
                                        <el-autocomplete ref="modelRef" v-model="registerNewDeviceForm.modelV" :fetch-suggestions="modelQuerySearch" @select="modelHandleSelect"  placeholder="输入型号" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="新旧程度：" prop="newOld">
                                        <el-select v-model="registerNewDeviceForm.newOld" style="width: 100px" placeholder="请选择">
                                            <el-option label="全新" value="全新" />
                                            <el-option label="九成新" value="九成新" />
                                            <el-option label="八成新" value="八成新" />
                                            <el-option label="五成新" value="五成新" />
                                            <el-option label="功能还在" value="功能还在" />
                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="6">
                                    <el-form-item label="单位：">
                                        <el-select v-model="registerNewDeviceForm.unit" style="width: 50px" placeholder="请选择">
                                            <el-option label="台" value="1" />
                                            <el-option label="辆" value="2" />

                                        </el-select>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第三行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="出厂编号：" prop="serialNumber">
                                        <el-input  v-model="registerNewDeviceForm.serialNumber"  placeholder="输入编号" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="是否防爆：">
                                        <el-radio v-model="registerNewDeviceForm.radio" label="1">是</el-radio>
                                        <el-radio v-model="registerNewDeviceForm.radio" label="2">否</el-radio>
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第四行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="安全标志：">
                                        <el-input  v-model="registerNewDeviceForm.safetySymbol"  placeholder="输入安全标志" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="防爆许可证：">
                                        <el-input  v-model="registerNewDeviceForm.explosionProofLicense"  placeholder="输入安全标志" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第五行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="生产许可证：">
                                        <el-input  v-model="registerNewDeviceForm.productionLicense"  placeholder="输入生产许可证" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="档案编号：">
                                        <el-input  v-model="registerNewDeviceForm.fileNo"  placeholder="输入档案编号" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第六行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="生产日期：" prop="productionDate">
                                        <el-date-picker  type="date" v-model="registerNewDeviceForm.productionDate"  placeholder="输入生产日期" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="原定金额：">
                                        <el-input  v-model="registerNewDeviceForm.money"  placeholder="输入原定金额" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            <!--第七行-->
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="税率：">
                                        <el-select v-model="registerNewDeviceForm.taxRate"  placeholder="请选择">
                                            <el-option label="1%" value="1%" />
                                            <el-option label="3%" value="3%" />
                                            <el-option label="6%" value="6%" />
                                            <el-option label="10%" value="10%" />
                                            <el-option label="11%" value="11%" />
                                            <el-option label="13%" value="13%" />

                                        </el-select>
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="月折旧：">
                                        <el-input  v-model="registerNewDeviceForm.monthDepreciation"  placeholder="输入折旧率" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>

                        <!-- <div style="position: absolute;bottom: 60px;right: calc(50% - 250px)">
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-button type="primary" @click="before">上一步</el-button>
                                </el-col>
                                <el-col :span="12">
                                    <el-button type="primary" @click="next">下一步</el-button>
                                </el-col>
                            </el-row>
                        </div> -->
                    <el-divider />
                    <!--新设备登记第三步表单3-->
                    <div class="registerForms" >
                        <el-form :inline="true" label-position="left" label-width="100px" :model="paramForm">
                            <!--第一行：增加参数-->
                            <!-- <el-row :gutter="24">
                                <el-col :span="24">
                                    <el-button disabled style="font-size: 20px;margin-bottom: 30px;margin-left: 80px; float: left">增加参数</el-button>
                                </el-col>
                            </el-row> -->
                            <!--第二行-->
                            <!-- <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="重量：">
                                        <el-input  v-model="registerNewDeviceForm.weight"  placeholder="输入重量" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="额定电压：">
                                        <el-input  v-model="registerNewDeviceForm.voltage"  placeholder="输入电压" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                            第三行 -->
                            <!-- <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-form-item label="额定电流：">
                                        <el-input  v-model="registerNewDeviceForm.current"  placeholder="输入电流" />
                                    </el-form-item>
                                </el-col>
                                <el-col :span="12">
                                    <el-form-item label="备注：">
                                        <el-input  v-model="registerNewDeviceForm.remark"  placeholder="输入备注" />
                                    </el-form-item>
                                </el-col>
                            </el-row> -->
                            <el-row :gutter="12" v-for="param in paramList" :key="param.id">
                                <el-col :span="12">
                                    <el-form-item :label="param.pName + '：'">
                                        <el-input  v-model="paramForm[param.pId]" style="width: 200px;" placeholder="请输入参数" />
                                    </el-form-item>
                                </el-col>
                            </el-row>
                        </el-form>

                        <!-- <div style="position: absolute;bottom: 60px;right: calc(50% - 250px)">
                            <el-row :gutter="24">
                                <el-col :span="12">
                                    <el-button type="primary" @click="before">上一步</el-button>
                                </el-col>
                                <el-col :span="12">
                                    <el-button type="primary" @click="next">下一步</el-button>
                                </el-col>
                            </el-row>
                        </div> -->
                    </div>
                    <el-divider />
                    <!--新设备登记第四步表单4-->
                    <div class="registerForms" >
                        <el-row :gutter="24">
                            <el-col :span="24">
                                <el-tag style="font-size: 20px;margin-bottom: 30px;margin-left: 80px; float: left">添加随机配套设备</el-tag>
                            </el-col>
                        </el-row>
                        <div style="display: flex; overflow: hidden; height: 150px;">
                            <el-upload
                                :http-request="upload('煤安证')"
                                list-type="picture-card"
                                multiple
                                :limit="1"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                                style="flex: 1"
                              >
                                <el-button >煤安证</el-button>
                            </el-upload>
                            <el-upload
                                :http-request="upload('防爆许可证')"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                                style="flex: 1"
                              >
                                <el-button>防爆许可证</el-button>
                            </el-upload>
                            <el-upload
                                :http-request="upload('设备外观')"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                                style="flex: 1"
                              >
                                <el-button>设备外观</el-button>
                            </el-upload>
                            <el-upload
                                :http-request="upload('合同扫描件')"
                                list-type="picture-card"
                                :on-preview="handlePictureCardPreview"
                                :on-remove="handleRemove"
                                style="flex: 1"
                              >
                                <el-button>合同扫描件</el-button>
                            </el-upload>
                        </div>
                        <el-divider />
                        <el-form-item label="备注">
                            <el-input  v-model="registerNewDeviceForm.remark" type="textarea" :rows="5" placeholder="请输入内容" />
                        </el-form-item>
                        <div style="position: relative; margin-top: 50px;">
                            <div style="display: flex; position: absolute;    left: 50%;    top: 50%;    transform: translate(-50%,-50%);">
                                <el-row :gutter="40">
                                    <!-- <el-col :span="12">
                                        <el-button type="primary" @click="before">上一步</el-button>
                                    </el-col> -->
                                    <el-col :span="12" style="flex: 1">
                                        <!--              需要再此处添加提价函数-->
                                        <!--              <el-button type="primary"  @click="submit">提&nbsp;&nbsp;&nbsp;&nbsp;交</el-button>-->
                                        <el-button type="primary" :loading="loading" :disabled="disabledEmit" @click="submitAdd">添&nbsp;&nbsp;&nbsp;&nbsp;加</el-button>
                                    </el-col>
                                    <el-col :span="12" style="flex: 1">
                                        <!--              需要再此处添加提价函数-->
                                        <!--              <el-button type="primary"  @click="submit">提&nbsp;&nbsp;&nbsp;&nbsp;交</el-button>-->
                                        <el-button :loading="loading" :disabled="!disabledEmit" @click="submitEdit">修&nbsp;&nbsp;&nbsp;&nbsp;改</el-button>
                                    </el-col>
                                    <el-col :span="12" style="flex: 1">
                                        <!--              需要再此处添加提价函数-->
                                        <!--              <el-button type="primary"  @click="submit">提&nbsp;&nbsp;&nbsp;&nbsp;交</el-button>-->
                                        <el-button :loading="loading" :disabled="!disabledEmit" @click="submitDel">删&nbsp;&nbsp;&nbsp;&nbsp;除</el-button>
                                    </el-col>
                                </el-row>
                            </div>
                        </div>
                    </div>
                </div>
            <!-- </el-drawer> -->
            </el-card>
        </page-main>
        <el-dialog v-model="dialogVisible">
            <img style="width: 100%" :src="dialogImageUrl" alt="" />
        </el-dialog>
    </div>
</template>
